<template>
  <div class="temp" ref="temp">
    <temp1 v-if="info.templateType == 1 || info.templateType == 2"></temp1>
    <temp2 v-else></temp2>
  </div>
</template>
<script>
  import temp1 from './components/temp1.vue'
  import temp2 from './components/temp2.vue'
  import domtoimage from 'dom-to-image'
  import bgMapMgr from '@/biz/bgMap/bgMap'
  export default {
    components: {
      temp1,
      temp2
    },
    data() {
      return {
        info: this.$store.state.screenInfo
      }
    },
    methods: {
      show(flag, twoFlag) {
        setTimeout(() => {
          if (flag) {
            this.downloadDomToImg(flag).then((res) => {
              this.$store.dispatch('screenImg', res)
              if (twoFlag == 'two') {
                this.$store.dispatch('buildingNameFlag', false)
                this.downloadDomToImg(flag).then((res2) => {
                  this.$store.dispatch('screenAppImgNoName', res2)
                  this.$store.dispatch('buildingNameFlag', true)
                  this.$store.dispatch('hiddenFlag', false)
                  this.downloadDomToImg(flag).then((res1) => {
                    this.$store.dispatch('screenAppImg', res1)
                    this.$store.dispatch('hiddenFlag', true)
                    this.$emit('uploadSuccess', 'success')
                  })
                })
              } else {
                this.$emit('uploadSuccess', 'success')
              }
            })
          } else {
            this.downloadDomToImg(flag)
          }
        }, 1000)
      },
      downloadDomToImg(flag) {
        return new Promise((resolve, reject) => {
          this.$nextTick(() => {
            const ref = this.$refs.temp
            let that = this
            domtoimage
              .toPng(ref, {
                width: 750,
                height: ref.scrollHeight * 2,
                style: {
                  transform: 'scale(2)',
                  transformOrigin: 'left top'
                }
              })
              .then(function (dataUrl) {
                if (dataUrl) {
                  if (flag) {
                    let fileData = that.base64toFile(dataUrl)
                    resolve(that.unloadFileCanvas(fileData))
                  } else {
                    that.$emit('uploadSuccess', dataUrl)
                    resolve(dataUrl)
                  }
                }
              })
              .catch(function (error) {
                that.$emit('uploadSuccess', false)
                reject(error)
              })
          })
        })
      },
      unloadFileCanvas(image) {
        let params = {}
        params.multipartFile = image
        return bgMapMgr.unloadFileCanvas(params).then((res) => {
          return res.imageURL
        })
      },
      base64toFile(base, filename) {
        var arr = base.split(',')
        var mime = arr[0].match(/:(.*?);/)[1]
        var suffix = mime.split('/')[1]
        var bstr = atob(arr[1])
        var n = bstr.length
        var u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, { type: mime })
      }
    },
    watch: {
      '$store.state.screenInfo': {
        handler(newValue, oldValue) {
          this.info = newValue
        },
        deep: true,
        immediate: true
      }
    }
  }
</script>
<style lang="scss" scoped>
  .temp {
    display: block;
    width: 375px;
  }
</style>
